/*引入混合函数*/
@import "mixins.less";
/*引入全局变量*/
@import "varibles.less";

#search {
    width: 100%;
    header {
        width: 100%;
        height: 88px;
        background-color: #1448ae;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1000;

        .top {
            width: 100%;
            height: 50px;
            position: relative;
            padding-top: 8px;

            i {
                top: 8px;
                left: 9%;
                position: absolute;
                width: 17px;
                height: 17px;
                background: url(../images/icon/sprites.png) no-repeat -50px -15px;
                box-sizing: border-box;
                background-size: 375px 475px;
            }

            p {
                font-size: 16px;
                text-align: center;
                color: #ffffff;
            }
        }

        .search-box {
            position: relative;
            width: 80%;
            font-size: 13px;
            border: 1px solid #8aa4d7;
            padding-left: 56px;
            margin-left: 10%;
            border-radius: 15px;

            span {
                color: #a7b3d9;
                line-height: 26px;
                display: block;
            }

            i {
                position: absolute;
                top: 5px;
                left: 30px;
                width: 17px;
                height: 17px;
                background: url(../images/icon/galss_03.png) no-repeat center;
                box-sizing: border-box;
                background-size: 100% 100%;
            }
        }
    }

    .content {
        .max-width();
        margin-top: 88px;
        .left-nav {
            width: 0.6378rem;
            background-color: #f4f4f4;
            font-size: 0.16rem;  
            position: fixed;
            height: 100%;
            //  热门
            .hot {
                width: 100%;
                display: block;
                padding: 0.23rem 0.13rem;
                // background-color: white;
                // border-left: 0.02rem solid #f7c612;
                text-align: center;

                i {
                    display: block;
                    text-align: center;
                    .w(66);
                    height: 0.25rem;
                    background: url(../images/icon/sprites.png) no-repeat -2.275rem -0.52rem;
                    box-sizing: border-box;
                    background-size: 3.8rem 4.75rem;
                }

                p {
                    color: #9e9e9e;
                }
            }

            // 国内
            .inland {
                width: 100%;
                display: block;
                padding: 0.23rem 0.13rem;
                text-align: center;

                i {
                    display: block;
                    text-align: center;
                    .w(66);
                    height: 0.25rem;
                    background: url(../images/icon/sprites.png) no-repeat -2.72rem -0.52rem;
                    box-sizing: border-box;
                    background-size: 3.8rem 4.75rem;
                }

                p {
                    color: #9e9e9e;
                }

            }

            // 国外
            .foreign {
                width: 100%;
                display: block;
                padding: 0.23rem 0.13rem;
                text-align: center;

                i {
                    display: block;
                    text-align: center;
                    .w(66);
                    height: 0.25rem;
                    background: url(../images/icon/sprites.png) no-repeat -3.13rem -0.5rem;
                    box-sizing: border-box;
                    background-size: 3.8rem 4.75rem;
                }

                p {
                    color: #9e9e9e;
                }
            }

        }

        // 右边展示栏
        .right-nav {
            width: 3.1141rem;
            margin-left: 0.6378rem;
            
            .hot-nav {
                width: 100%;
                margin-bottom: 0.5rem;
                display: none;
                ul {
                    display: flex;
                    flex-wrap: nowrap;
                    margin: 0.1rem 0.08rem 0rem 0.08rem;

                    li {
                        width: 50%;
                        margin-right: 0.04rem;
                        border: 0.01rem solid #c8ceca;
                        a{
                            .ske(208/286*100%);
                            display: block;
                            img {
                                .imgBlock();
                            }
                        }
                        

                        p {
                            font-size: 0.16rem;
                            text-align: center;
                            color: #989898;
                            margin: 0.08rem 0rem;
                        }
                    }
                }
            }

            .inland-nav {
                display: none;
                width: 100%;
                margin-bottom: 0.5rem;
                ul {
                    display: flex;
                    flex-wrap: nowrap;
                    margin: 0.1rem 0.08rem 0rem 0.08rem;

                    li {
                        width: 50%;
                        margin-right: 0.04rem;
                        border: 0.01rem solid #c8ceca;
                        a{
                            .ske(208/286*100%);
                            display: block;
                             img {
                                 .imgBlock();
                             }
                        }
                       
                        p {
                            font-size: 0.16rem;
                            text-align: center;
                            color: #989898;
                            margin: 0.08rem 0rem;
                        }
                    }
                }
            }

            .foreign-nav {
                display: none;
                width: 100%;
                  margin-bottom: 0.5rem;
                ul {
                    display: flex;
                    flex-wrap: nowrap;
                    margin: 0.1rem 0.08rem 0rem 0.08rem;

                    li {
                        width: 50%;
                        margin-right: 0.04rem;
                        border: 0.01rem solid #c8ceca;
                        a {
                            .ske(208/286*100%);
                            display: block;

                            img {
                                .imgBlock();
                            }
                        }
                        p {
                            font-size: 0.16rem;
                            text-align: center;
                            color: #989898;
                            margin: 0.08rem 0rem;
                        }
                    }
                }
            }
            .unfold{
                display: block;
            }

        }

       
        // 切换
        .hot.unfold {
            background-color: white;
            border-left: 0.02rem solid #f7c612;

            i {
                background: url(../images/icon/sprites.png) no-repeat -2.275rem -0.9rem;
                box-sizing: border-box;
                background-size: 3.8rem 4.75rem;
            }

            p {
                color: #4b6abc;
            }

        }


        .inland.unfold {
            background-color: white;
            border-left: 0.02rem solid #f7c612;

            i {
                background: url(../images/icon/sprites.png) no-repeat -2.72rem -0.9rem;
                box-sizing: border-box;
                background-size: 3.8rem 4.75rem;
            }

            p {
                color: #4b6abc;
            }

        }

        .foreign.unfold{
            background-color: white;
            border-left: 0.02rem solid #f7c612;

            i {
                background: url(../images/icon/sprites.png) no-repeat -3.13rem -0.9rem;
                box-sizing: border-box;
                background-size: 3.8rem 4.75rem;
            }

            p {
                color: #4b6abc;
            }

        }


    }
    .tabbar{
        a:nth-child(2){
            color: blue;
        }
    }
}